'use client'
import React, {useEffect, useState} from "react";
import {Card, Code, Spinner,CardBody} from "@nextui-org/react";
import ViewShare from "@/app/service/view/ViewShare";
import ViewNote from "@/app/service/view/ViewNote";
import {decodeFromBase64} from "next/dist/build/webpack/loaders/utils";
import {MdPreview} from "md-editor-rt";
import 'md-editor-rt/lib/style.css';
import {useParams} from "react-router-dom";
import {useRouter} from "next/router";
import {search} from "@codemirror/search";


export default function ViewSharePage() {
    //路径参数获取
    /*const [searchParams, setSearchParams] = useSearchParams();*/
    //状态定义
    /*const location = useLocation();*/
    //分享Id临存
    const [shareId, setShareId] = useState<any>(null/*searchParams.get("shareId")*/);
    //加载中状态
    const [isLoading, setIsLoading] = useState(true);
    //执行状态
    const [isSuccess, setIsSuccess] = useState({state: false, message: '正在获取中...'});

    /*先获取shareId*/
    useEffect(() => {
        // 检查是否在客户端运行
        if (typeof window !== 'undefined') {
            //状态定义
            const search = window.location.search;
            const params = new URLSearchParams(search);//使用 URLSearchParams 解析查询字符串
            const shareIdParam = params.get('shareId');//获取shareId
            if (shareIdParam !== '' && shareIdParam !== null) {
                setShareId(shareIdParam);
            }
        }
    }, [])

    /*再通过检测shareId变化去加载数据，渲染前加载(钩子是在客户端执行)*/
    useEffect(() => {
        /*获取分享数据*/
        async function initData() {

            if (!shareId) {
                //ToastUtil('必要的数据不能为空哦 😭', '❎', "error");
                setIsSuccess({state: false, message: '必要的数据不能为空哦 😭'});
                return;
            }

            const responseShare = await ViewShare(shareId);/*获取笔记ID*/
            if (responseShare.status) {
                const responseNote = await ViewNote(responseShare.data.noteId);/*获取笔记内容*/
                if (responseNote.status) {
                    setIsSuccess({state: true, message: decodeFromBase64(responseNote.data.content)});
                } else {
                    //ToastUtil(responseNote.message, '❎', "error");
                    setIsSuccess({state: false, message: responseNote.message});
                    return;
                }
            } else {
                //ToastUtil(responseShare.message, '❎', "error");
                setIsSuccess({state: false, message: responseShare.message});
                return;
            }
        }

        //判断是否空再加载数据
        if (shareId !== null) {
            setIsLoading(true);
            initData().then(() => {
                setIsLoading(false);
            });
        }

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [shareId/*location*/]);


    return (
        <>
            {
                isLoading ?
                    /*加载中*/
                    <div className={'flex justify-center h-screen items-center bg-white'}>
                        <Card className={'flex flex-col h-screen w-screen'} shadow={"md"} radius={'lg'}>
                            <CardBody>
                                <div className={'flex justify-center flex-grow items-center bg-white p-5'}>
                                    <Spinner label="加载ing...😵‍💫" color="primary" labelColor="primary"
                                             size={"sm"}/>
                                </div>
                            </CardBody>
                        </Card>
                    </div> : !isSuccess.state ?
                        /*请求存在问题*/
                        DontShare(isSuccess.message) :
                        /*渲染笔记数据*/
                        <div className={'flex justify-center h-screen items-center bg-white'}>
                            <Card className={'flex flex-col h-screen w-screen'} shadow={"md"} radius={'none'}>
                                <CardBody>
                                    {/*内容*/}
                                    <MdPreview modelValue={isSuccess.message} previewTheme={'default'} theme={"light"}/>
                                </CardBody>
                            </Card>
                        </div>
            }
        </>
    )

    /*不存在的分享*/
    function DontShare(message: string) {
        return (
            <div className={'flex justify-center h-screen items-center bg-white'}>
                <Card className={'flex flex-col h-screen w-screen'} shadow={"md"} radius={'lg'}>
                    <CardBody>
                        <div className={'flex justify-center flex-grow items-center bg-white p-5'}>
                            <Code color="warning"> {message} </Code>
                        </div>
                    </CardBody>
                </Card>
            </div>
        )
    }
}